<template>
  <div class="about">
    <button @click="toReplace">replace</button>
    <button @click="toHref">href</button>
    <button @click="toRouterQuery">toRouterQuery</button>
    <button @click="toRouterParams">toRouterParams</button>
    <button @click="numAdd">store++</button>
    <hr>
    {{this.$store.state.num}}
    <div class="fang" v-anime="{translateX: 50}">{{age}}</div>
    <svg width="128" height="128" viewBox="0 0 128 128">
      <polygon points="64 68.86319782520879 8.574 99.98495971528243 63.23967737424433 67.54584066031926 64 3.984959715282427 64.76032262575568 67.54584066031926 119.426 99.98495971528243 " fill="currentColor"></polygon>
    </svg>
  </div>
</template>
<script>
import { animation } from 'animejs'
export default {
  name: "my-component",
  data () {
    return {
      age: 0
    };
  },
  methods: {
    numAdd () {
      this.$store.commit('numAdd')
    },
    toRouterParams () {
      this.$router.push({
        // path: '/one',
        name: 'one',
        params: {
          age: 20
        }
      })
      
    },
    toRouterQuery () {
      this.$router.push({
        path: '/one',
        query: {
          name: 'zhangsan'
        }
      })
    },
    toHref () {
      location.href = '#/one'
    },
    toReplace () {
      window.location.replace('#/one')  
    },
    handle () {
      // this.$anime({
      //   targets: this.$el.querySelector('.fang'),
      //   translateX: 250
      // })
      var logEl = document.querySelector('.fang')
      var battery = {
        age: 100
      }
      var that = this
      this.$anime({
        targets: battery,
        age: 130,
        round: 1,
        easing: 'linear',
        update: function () {
          that.age = battery.age
        }
      })
      this.$anime({
        targets: this.$el.querySelector('polygon'),
        points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
        easing: 'easeInOutExpo',
        direction: 'alternate',
        loop: true
      });
    }
  },
  mounted: function () {

    // Once the component is mounted, begin animating

  }
}
</script>
<style scoped>
.fang {
  height: 100px;
  width: 100px;
  background-color: rgb(201, 0, 0);
}
</style>
